<template>
    <div class="goods-item">
        <router-link class="images" to="/">
            <img :src="good.picture" alt="">
        </router-link>
        <div class="title ellipsis-2">{{ good.name }}</div>
        <div class="type">{{}}</div>
        <div class="price">￥{{ good.price }}</div>
        <div class="extra">
            <router-link to="/">
                <span>找相似?</span>
                <span>发现更多宝贝 ></span>
            </router-link>

        </div>
    </div>
</template>

<script>
export default {
    props: {
        good: {
            type: Object,
            default: {}
        }
    }
}
</script>

<style lang="less" scoped>
.goods-item {
    position: relative;
    width: 200px;
    height: 300px;
    border: 1px solid #f5f5f5;
    margin-bottom: 7px;
    overflow: hidden; //若超出了给定高度或者宽度，会隐藏
    transition: all 0.5s;

    .images {
        display: block;
        width: 160px;
        height: 160px;
        margin: 0 auto;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .title {
        font-size: 16px;
    }

    .type {
        font-size: 14px;
        color: #666666;
        margin: 10px;
    }

    .price {
        font-size: 16px;
        color: @priceColor;
    }

    .extra {
        // display: none;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: @xtxColor;
        height: 85px;
        transform: translate3d(0, 100%, 0);
        transition: all 0.5s;

        span {
            display: block;
            color: #fff;
            font-size: 16px;
            text-align: center;
            margin: 10px 0;
        }

        span:last-child {
            font-size: 14px;
        }
    }

    &:hover {
        border: 1px solid @xtxColor;

        .extra {
            transform: none;
        }
    }
}
</style>